<template>
  <div>
    <h2>物流相关信息</h2>
    <div class="logistics-info-header">
      <div class="logistics-info-header-left">
        <div class="logistics-status blue">{{data[orderInfo.logisticsStatus]}}</div>
        <div class="logistics-company">{{orderInfo.logisticsCompany}}</div>
        <div class="logistics-no">{{orderInfo.logisticsNo}}</div>
      </div>
    </div>
    <ul class="logistics-info-list" v-if="flag">
      <li v-for="item in orderInfo.logisticsInfo" :key="item.time">
        <div class="logistics-info-list-time">{{item.time}}</div>
        <div class="logistics-info-list-content">{{item.content}}</div>
      </li>
    </ul>
    <button @click="isShow">查看物流详情</button>
  </div>
</template>

<script>
export default {
  props: {
    orderInfo: Object,
  },
  data() {
    return {
      data: {
        0: '未发货',
        1: '已发货',
        2: '已签收',
        3: '未签收',
      },
      flag: false,
    }
  },
  methods: {
    isShow() {
      if (
        this.orderInfo.role === 'admin' ||
        this.orderInfo.role === 'zhangsan' ||
        this.orderInfo.role === 'lisi'
      ) {
        this.flag = true
      }
    },
  },
}
</script>

<style>
</style>